<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="js/jquery-1.3.1.js" ></script>
		<script type="text/javascript" src="js/assist.js" ></script>
		<link rel="stylesheet" href="css/style.css" />
		<title></title>
		<script type='text/javascript'>
			$(document).ready(function(){
/*					
 * 				层次选择器
					$('body #one').css('background','white');
					$('#one div').css('background','red');
					$('#one > div').css('background','black');
					$("#one").nextAll('div').css('background','white');
					$('.one + div').css('background','red');
					$('.one').next('div').css('background','red');
					$('#one ~ div').css('background','red');*/
/*					
 * 				筛选选择器
					$('div:last').css('background','red');
					$('div:first').css('background','blue');
					$('div:not(.one)').css('background','red');
					$('div:even').css('background','red');
					$('div:odd').css('background','red');
					$('div:eq(3)').css('background','red');
					$('div:lt(3)').css('background','red');
					$('div:gt(3)').css('background','red');
					$(':header').css('background','red');
					$(':animated').css('background','red');
					$('div:contains(di)').css('background','red');
					$('div:empty').css('background','red');
					$('div:has(.mini)').css('background','red');
					$('div:parent').css('background','red');*/
					
/**				可见性过滤选择器
 * 					$('div:hidden').show(2000);
					$('div:visible').css('background','red');*/
/*              属性过滤选择器
 *
					$('div[class^=one]').css('background','red');
					$('div[id]').css('background','red');
					$('div[class]').css('background','red');
					$('div[id$=e]').css('background','red');
					$('div[class*=ne]').css('background','red');
					$('div[title]').css('background','red');*/
/**				子元素过滤选择器
 * 
					$('div.one :nth-child(even)').css('background','red');
					$('div.one :first-child').css('background','red');
					$('div.one :last-child').css('background','red');
					$('div.one :only-child').css('background','red');*/
					
			});
		</script>
	</head>
	<body>
		  <button id="reset">手动重置页面元素</button>
		  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
		 <h3>基本选择器.</h3>
		 
		 <!-- 控制按钮 -->
		  <input type="button" value="选择 id为 one 的元素." id="btn1"/>  
		  <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
		  <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
		  <input type="button" value="选择 所有的元素." id="btn4"/>
		  <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
		
		  <br /><br />
		
		   <!-- 测试的元素 -->
		  <div class="one" id="one" >
		 id为one,class为one的div
		      <div class="mini">class为mini</div>
		  </div>
		
		    <div class="one"  id="two" title="test" >
			 id为two,class为one,title为test的div.
		      <div class="mini"  title="other">class为mini,title为other</div>
		      <div class="mini"  title="test">class为mini,title为test</div>
		  </div>
		
		  <div class="one">
		      <div class="mini">class为mini</div>
		      <div class="mini">class为mini</div>
			  <div class="mini">class为mini</div>
			  <div class="mini"></div>
		  </div>
		
		
		
		  <div class="one">
		      <div class="mini">class为mini</div>
		      <div class="mini">class为mini</div>
			  <div class="mini">class为mini</div>
			  <div class="mini"  title="tesst">class为mini,title为tesst</div>
		  </div>
		
		
		  <div style="display:none;"  class="none">style的display为"none"的div</div>
		  
		  <div class="hide">class为"hide"的div</div>
		 
		  <div>
		  包含input的type为"hidden"的div<input type="hidden" size="8"/>
		  </div>
		
		  
		  <span id="mover">正在执行动画的span元素.</span>		
	</body>
</html>
